<template>
  <div class="monitor">
    <!-- 图标 -->
    <el-row :gutter="20" class="monitor-header">
      <el-col :xs="32" :sm="32" :md="20" :lg="24" :xl="24">
        <el-row class="monitor-cart-box" :gutter="20">
          <el-col :span="24">
            <div class="monitor-cart-name">
              <div class="monitor-cart-name-left">
                <div class="monitor-cart-name-left-icon">
                  <Count class="monitor-cart-name-left-icon-s" />
                </div>
                统计数据
              </div>
              <!-- <div class="monitor-cart-name-right">
                <div class="monitor-cart-name-right-list">今日</div>
                <div class="monitor-cart-name-right-list">本月</div>
                <div class="monitor-cart-name-right-list">全年</div>
                <el-date-picker
                  v-model="value1"
                  size="mini"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div> -->
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
            <Monitorcar
              name="今日订单数据"
              :number="rowData ? rowData.todayOrder : 0"
              color="#F141AF"
              icon="ViewsSvg"
            />
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
            <Monitorcar
              name="今日营业流水"
              :number="rowData ? rowData.todayMoney : 0"
              color="#F85E1F"
              icon="SalesSvg"
            />
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
            <Monitorcar
              name="商品总数量"
              :number="rowData ? rowData.goodsTotal : 0"
              color="#9830FA"
              icon="OrderSvg"
            />
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
            <Monitorcar
              name="本月营业额"
              :number="rowData ? rowData.monthMoney : 0"
              color="#0C99FD"
              icon="RegistrationSvg"
            />
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
            <Monitorcar
              name="本月订单数"
              :number="rowData ? rowData.monthOrder : 0"
              color="#F141AF"
              icon="RegistrationSvg"
            />
          </el-col>
        </el-row>
      </el-col>
      <!-- <el-col :xs="12" :sm="12" :md="10" :lg="6" :xl="6">
                <div class="monitor-cart-probability">
                        <dv-water-level-pond :config="config" class="monitor-cart-probability-box" />
                        <div class="monitor-cart-probability-name">转化率</div>
                </div>
            </el-col> -->
    </el-row>
    <!-- 图标二 -->
    <el-row :gutter="20">
      <el-col :xs="32" :sm="32" :md="21" :lg="23" :xl="21">
        <el-row class="monitor-header-two" :gutter="20">
          <el-col :span="24">
            <div class="monitor-cart-name">
              <div class="monitor-cart-name-left">
                <div class="monitor-cart-name-left-icon">
                  <Visitors class="monitor-cart-name-left-icon-s" />
                </div>
                数据汇总
              </div>
              <div class="monitor-cart-name-right">
                <div class="monitor-cart-name-right-list" @click="checkType(1)">
                  近7天
                </div>
                <div class="monitor-cart-name-right-list" @click="checkType(2)">
                  近月
                </div>
                <!-- <div class="monitor-cart-name-right-list">全年</div> -->
                <!-- <el-date-picker
                  v-model="value1"
                  size="mini"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker> -->
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="monitor-visitors">
              <ve-histogram :data="chartData"></ve-histogram>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row class="monitor-header-two" :gutter="20">
                    <el-col :span="24">
                        <div class="monitor-cart-name">
                            <div class="monitor-cart-name-left">
                                <div class="monitor-cart-name-left-icon">
                                    <Visitors class="monitor-cart-name-left-icon-s" />
                                </div>
                                销售额类目占比
                            </div>
                            <div class="monitor-cart-name-right">
                                <div class="monitor-cart-name-right-list">今日</div>
                                <div class="monitor-cart-name-right-list">本月</div>
                                <div class="monitor-cart-name-right-list">全年</div>
                                <el-date-picker
                                    v-model="value1"
                                    size="mini"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="monitor-visitors monitor-visitors-scale">
                            <div class="monitor-visitors-left">
                                <ve-ring :data="scaleData" :colors="colors"></ve-ring>
                            </div>
                            <div class="monitor-visitors-right">
                                <div class="monitor-visitors-right-list" v-for="(item,index) in colors" :key="index">
                                    <CircleSvg class="monitor-visitors-right-list-icon" :style="{color: item}"></CircleSvg>
                                    <div class="monitor-visitors-right-list-name">{{scaleData.rows[index]['类目']}}</div>
                                    <div class="monitor-visitors-right-list-number">¥ {{scaleData.rows[index]['销量']}}</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row> -->
      </el-col>
      <el-col
        v-if="false"
        :xs="23"
        :sm="23"
        :md="10"
        :lg="6"
        :xl="6"
        :offset="1"
      >
        <!-- <el-row class="monitor-header-two" :gutter="20" style="margin-bottom: 20px;">
                    <el-col :span="24">
                        <div class="monitor-cart-name">
                            <div class="monitor-cart-name-left">
                                <div class="monitor-cart-name-left-icon">
                                    <Visitors class="monitor-cart-name-left-icon-s" />
                                </div>
                                总注册用户
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="monitor-header-users">
                            <div class="monitor-header-users-icon">
                                <HerdSvg  class="monitor-header-users-icon-s" />
                            </div>
                            <div class="monitor-header-users-number">
                                <count-to :startVal='0' :endVal='120' :duration='3000'></count-to>
                            </div>
                            <div class="monitor-header-users-time">
                                2020-06-09 22:18:10
                            </div>
                        </div>
                    </el-col>
                </el-row> -->
        <!-- <el-row class="monitor-header-two" :gutter="20" style="margin-bottom: 20px;">
                    <el-col :span="24">
                        <div class="monitor-cart-name">
                            <div class="monitor-cart-name-left">
                                <div class="monitor-cart-name-left-icon">
                                    <Visitors class="monitor-cart-name-left-icon-s" />
                                </div>
                                当前活跃度
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <ve-funnel :data="funnelData" :settings="funnelSettings"></ve-funnel>
                    </el-col>
                </el-row> -->
        <!-- <el-row class="monitor-header-two" :gutter="20" style="margin-bottom: 20px;">
                    <el-col :span="24">
                        <div class="monitor-cart-name">
                            <div class="monitor-cart-name-left">
                                <div class="monitor-cart-name-left-icon">
                                    <Visitors class="monitor-cart-name-left-icon-s" />
                                </div>
                                客户满意度
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                       <div class="monitor-header-comment">
                           <div class="monitor-header-comment-list">
                                <div class="monitor-header-comment-list-li monitor-header-comment-list-li-number">
                                    <count-to :startVal='0' :endVal='20120' :duration='3000'></count-to>
                                </div>
                                <div class="monitor-header-comment-list-li monitor-header-comment-list-li-tag">
                                    <LaughSvg class="monitor-header-comment-list-li-icon" />
                                    <div class="monitor-header-comment-list-li-tag-text">三星及以上评论</div>
                                </div>
                                <div class="monitor-header-comment-list-li monitor-header-comment-list-li-percentage">
                                    95%
                                </div>
                           </div>
                           <div class="monitor-header-comment-list">
                                <div class="monitor-header-comment-list-li monitor-header-comment-list-li-number">
                                    <count-to :startVal='0' :endVal='120' :duration='3000'></count-to>
                                </div>
                                <div class="monitor-header-comment-list-li monitor-header-comment-list-li-tag">
                                    <CryingSvg class="monitor-header-comment-list-li-icon" />
                                    <div class="monitor-header-comment-list-li-tag-text">二星及以下评论</div>
                                </div>
                                <div class="monitor-header-comment-list-li monitor-header-comment-list-li-percentage">
                                    5%
                                </div>
                           </div>
                       </div>
                    </el-col>
                </el-row> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Monitorcar from "../../components/analyze/monitorcar";
import Count from "../../assets/icon/count.svg";
import Visitors from "../../assets/icon/visitors.svg";
import CircleSvg from "../../assets/icon/circle.svg";
import HerdSvg from "../../assets/icon/herd.svg";
import CryingSvg from "../../assets/icon/crying.svg";
import LaughSvg from "../../assets/icon/laugh.svg";

import countTo from "vue-count-to";
export default {
  data() {
    return {
      value1: "",
      rowData: {},
      config: {
        data: [66],
        shape: "roundRect",
      },
      chartData: {
        columns: ["日期", "订单数", "金额"],
        rows: [],
      },
      colors: [
        "#F141AF",
        "#F85E1F",
        "#9830FA",
        "#0C99FD",
        "#25D9B4",
        "#1AA2FC",
      ],
      scaleData: {
        columns: ["类目", "销量"],
        rows: [
          { 类目: "洗脚", 销量: 1393 },
          { 类目: "艾草", 销量: 3530 },
          { 类目: "艾浴包", 销量: 2923 },
          { 类目: "艾香", 销量: 1723 },
          { 类目: "艾皂", 销量: 3792 },
          { 类目: "其他", 销量: 4593 },
        ],
      },
      funnelSettings: {
        sequence: ["跳出率", "留存率", "活跃率", "转化率"],
      },
      funnelData: {
        columns: ["状态", "数值"],
        rows: [
          { 状态: "跳出率", 数值: 900 },
          { 状态: "留存率", 数值: 600 },
          { 状态: "活跃率", 数值: 300 },
          { 状态: "转化率", 数值: 200 },
        ],
      },
      type: 1,
    };
  },
  components: {
    Monitorcar,
    Count,
    Visitors,
    CircleSvg,
    countTo,
    HerdSvg,
    CryingSvg,
    LaughSvg,
  },
  async mounted() {
    await this.initData();
  },
  created() {},
  methods: {
    checkType(type) {
      this.chartData.rows = [];
      this.type = type;
      this.initData();
    },
    async initData() {
      let res = await this.http.get("/index/getAll");
      this.rowData = res.result;
      console.log(this.rowData);
      let chd = await this.http.get("/index/getAllGraphics?type=" + this.type);
      chd.result.forEach((e) => {
        this.chartData.rows.push({
          日期: e.toDate,
          订单数: e.orderCount,
          金额: e.totalMoney,
        });
      });

      // this.chartData.rows = chd.result;
    },
  },
};
</script>

<style scoped>
.monitor {
  background: #f5f7f9;
  padding: 25px;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
}
.monitor-header {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 20px;
}
.monitor-header-two {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 20px;
}
.monitor-cart-name {
  width: 100%;
  height: 50px;
  /* background: yellow; */
  margin-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
}
.monitor-cart-name-left {
  width: 160px;
  height: 100%;
  /* background: blueviolet; */
  line-height: 42px;
  color: #5c5c5c;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.monitor-cart-name-left-icon {
  width: 30px;
  height: 30px;
  background: #f7eeff;
  border-radius: 2px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.monitor-cart-name-left-icon-s {
  width: 20px;
  height: 20px;
  color: blueviolet;
  fill: currentColor;
}
.monitor-cart-name-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.monitor-cart-name-right-list {
  width: 60px;
  height: 50px;
  /* background: chartreuse; */
  text-align: center;
  line-height: 50px;
  color: #515a6e;
  font-size: 14px;
  cursor: pointer;
}
.monitor-cart-name-right-list:hover {
  color: #2d8cf0;
}
.monitor-cart-box {
  /* background: chocolate; */
  width: 100%;
  height: 100px;
  padding: 10px 15px 0;
  box-sizing: border-box;
  /* border: 1px solid #E6E6E6; */
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 20px;
}
.monitor-cart-probability {
  /* background: cornflowerblue; */
  width: 100%;
  height: 210px;
  padding: 20px 15px 0px;
  box-sizing: border-box;
}
.monitor-cart-probability-box {
  width: 100%;
  height: 80%;
  /* border: 1px solid #515A6E; */
  border-radius: 5px;
}
.monitor-cart-probability-name {
  width: 100%;
  height: 20%;
  text-align: center;
  line-height: 34px;
  /* background: chartreuse; */
  color: #515a6e;
  font-size: 14px;
  cursor: pointer;
}
.monitor-visitors {
  width: 100%;
  height: 400px;
}
.monitor-visitors-scale {
  display: flex;
  justify-content: space-between;
}
.monitor-visitors-left {
  width: 60%;
  height: 100%;
}
.monitor-visitors-right {
  width: 40%;
  height: 100%;
  /* background: chocolate; */
  padding: 20px;
  box-sizing: border-box;
}
.monitor-visitors-right-list {
  width: 100%;
  height: 40px;
  /* background: cyan; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.monitor-visitors-right-list-icon {
  width: 15px;
  height: 15px;
  color: #666666;
  fill: currentColor;
}
.monitor-visitors-right-list-name {
  width: 120px;
  /* background: darkgoldenrod; */
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #595959;
  padding-left: 10px;
  box-sizing: border-box;
}
.monitor-visitors-right-list-number {
  flex: 1;
  /* background: yellowgreen; */
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #8c8c8c;
  padding-left: 10px;
  box-sizing: border-box;
  text-align: right;
  padding-right: 15px;
}
.monitor-header-users {
  width: 100%;
  height: auto;
  padding: 0px 10px;
  box-sizing: border-box;
}
.monitor-header-users-time {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #515a6e;
  text-align: center;
  margin-bottom: 10px;
}
.monitor-header-users-number {
  width: 100%;
  height: 58px;
  text-align: center;
  font-size: 40px;
  line-height: 58px;
  color: #515a6e;
  font-weight: bold;
}
.monitor-header-users-message {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #515a6e;
  text-align: center;
}
/* 用户数 */
.monitor-header-users-icon {
  width: 100%;
  height: 50px;
  text-align: center;
  /* background: chocolate; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.monitor-header-users-icon-s {
  width: 36px;
  height: 36px;
  fill: currentColor;
  color: #2399fa;
}
/* 评论 */
.monitor-header-comment {
  width: 100%;
  height: auto;
}
.monitor-header-comment .monitor-header-comment-list:nth-last-child(1) {
  border-bottom-color: transparent;
}
.monitor-header-comment-list {
  width: 100%;
  height: 120px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #e8eaec;
}
.monitor-header-comment-list-li {
  width: 33%;
  height: 120px;
}
.monitor-header-comment-list-li-number {
  font-weight: bold;
  font-size: 30px;
  color: #515a6e;
  line-height: 120px;
  text-align: center;
}
.monitor-header-comment-list-li-icon {
  width: 50px;
  height: 50px;
  color: #fbd971;
  fill: currentColor;
}
.monitor-header-comment-list-li-tag {
  display: flex;
  /* background: cyan; */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.monitor-header-comment-list-li-tag-text {
  width: 100%;
  height: 35px;
  text-align: center;
  line-height: 35px;
  color: #808695;
  font-size: 14px;
}
.monitor-header-comment-list-li-percentage {
  height: 100%;
  line-height: 120px;
  color: #36c17b;
  font-size: 18px;
  text-align: center;
}
</style>